define(function () {
    function Details_Magnifier(data) {
        class Magnifier {
            // 获取节点的方法
            getEle(tag, single = true) {
                // 单个节点对象
                if (single) {
                    return document.querySelector(tag);
                } else {
                // 多个节点对象
                    return document.querySelectorAll(tag);
                }
            }
    
            constructor() {
                this.s_box = this.getEle('.smallimg-box');
                this.s_img = this.s_box.children[0];
                this.frame = this.s_box.children[1];
                this.b_box = this.getEle(".bigimg-box");
                this.b_img = this.b_box.children[0];
    
                this.btn_left = this.getEle("#left");
                this.btn_right = this.getEle("#right");
    
                this.banner_box = this.getEle(".magnifier-banner-wrap ul");
                this.banner_img = this.banner_box.querySelectorAll("li img");
                // this.banner_box.style.width = (this.banner_img.length + 1) * this.banner_img[0].offsetWidth + "px";
                this.index = 0;
            
                this.addEvent();
            }
    
            addEvent = function () {
                const that = this;
    
                this.s_box.onmouseenter = function () {
                    that.show();
                }
    
                this.s_box.onmousemove = function (eve) {
                    const e = eve || window.event;
                    that.move(e);
                }
    
                this.s_box.onmouseleave = function () {
                    that.hide();
                }
    
                this.btn_left.onclick = function () {
                    that.left_changeIndex();
                }
                this.btn_right.onclick = function () {
                    that.right_changeIndex();
                }
    
                for (let i = 0; i < this.banner_img.length; i++) {
                    this.banner_img[i].onmouseover = () => {
                        for (let j = 0; j < this.banner_img.length; j++) {
                            this.banner_img[j].style.border = "2px solid #e0e0e0";
                        }
                        // console.log(i);
                        this.b_img.src = this.s_img.src = this.banner_img[i].src;
                        this.banner_img[i].style.border = "2px solid #ff0036";
                    }
                }
            }
        
            show = function () {
                this.frame.style.display = "block";
                this.b_box.style.display = "block";
            
                this.frame.style.width = (this.b_box.offsetWidth / this.b_img.offsetWidth) * this.s_box.offsetWidth + "px";
                this.frame.style.height = (this.b_box.offsetHeight / this.b_img.offsetHeight) * this.s_box.offsetHeight + "px";
            }
    
            hide = function () {
                this.frame.style.display = "none";
                this.b_box.style.display = "none";
            }
    
            move = function (e) {
                let l = e.pageX - this.s_box.offsetLeft - this.frame.offsetWidth / 2 - 145;
    
                let t = e.pageY - this.s_box.offsetTop - this.frame.offsetHeight / 2 - 165;
    
                if (l < 0) l = 0;
                if (t < 0) t = 0;
                if (l > this.s_box.clientWidth - this.frame.offsetWidth) {
                    l = this.s_box.clientWidth - this.frame.offsetWidth;
                }
                if (t > this.s_box.clientHeight - this.frame.offsetHeight) {
                    t = this.s_box.clientHeight - this.frame.offsetHeight;
                }
    
                this.frame.style.left = l + "px";
                this.frame.style.top = t + "px";
    
                const x = l / (this.s_box.offsetWidth - this.frame.offsetWidth);
                const y = t / (this.s_box.offsetHeight - this.frame.offsetHeight);
    
                this.b_img.style.left = (this.b_box.offsetWidth - this.b_img.offsetWidth) * x + "px";
                this.b_img.style.top = (this.b_box.offsetHeight - this.b_img.offsetHeight) * y + "px";
            }

            

            left_changeIndex = function () {
                if (this.index === 0) {
                    this.index = 0;
                } else {
                    this.index--;
                }

                this.render();
            }
        
            right_changeIndex = function () {
                if (this.index === this.banner_img.length - data.images_num) {
                    this.index = 0;
                    // this.banner_box.style.left = 0 + "px";
                } else {
                    this.index++;
                }
                this.render();
            }

            render = function () {
                move(this.banner_box, {
                    left: -this.index * this.banner_box.offsetWidth,
                })
            }

            /* 第二种方法 */
            //     if (this.index === this.banner_img.length - 5) {
            //         this.index = 0;

            //     move(this.banner_box, {
            //         left: -this.index * this.banner_img[0].offsetWidth,
        }
        new Magnifier();
    
        /* ---------- 选择 ---------- */
        let s_img = document.querySelector(".smallimg-box img");
        let b_img = document.querySelector(".bigimg-box img");
        let Network = document.querySelectorAll(".Network");
        let phone_type = document.querySelectorAll(".phone-type dd");
        let Package = document.querySelector(".Package");
        let storage = document.querySelectorAll(".storage-type dd");
    
        // Network.onclick = function () {
            // if (this.classList.contains("Network_active")) {
            //     this.classList.remove("Network_active");
            // } else {
            //     this.classList.add("Network_active");
            // }
        // }

        for (let i = 0; i < Network.length; i++) {
            Network[i].onclick = function () {
                for (let j = 0; j < Network.length; j++) {
                    Network[j].style.border = "1px solid #b2b7bd";
                    Network[j].style.margin = "0px 4px 4px 0px";
                }
                Network[i].style.border = "2px solid #ff0036";
                Network[i].style.margin = "-1px 3px 3px -1px";
            }
        }
    
        for (let i = 0; i < phone_type.length; i++) {
            phone_type[i].onclick = function () {
                for (let j = 0; j < phone_type.length; j++) {
                    phone_type[j].style.border = "1px solid #b2b7bd";
                    phone_type[j].style.margin = "0px 4px 4px 0px";
                }
                phone_type[i].style.border = "2px solid #ff0036";
                phone_type[i].style.margin = "-1px 3px 3px -1px";

                // console.log(data.img_Color);
                s_img.src = data.img_Color[i];
                b_img.src = data.img_Color[i];
            }
        }
    
        Package.onclick = function () {
            Package.style.border = "2px solid #ff0036";
            Package.style.margin = "-1px 3px 3px -1px";
        }
    
        for (let i = 0; i < storage.length; i++) {
            storage[i].onclick = function () {
                for (let j = 0; j < storage.length; j++) {
                    storage[j].style.border = "1px solid #b2b7bd";
                    storage[j].style.margin = "0px 4px 4px 0px";
                }
                storage[i].style.border = "2px solid #ff0036";
                storage[i].style.margin = "-1px 3px 3px -1px";
            }
        }

        function move(ele, data, cb){
            clearInterval(ele.t);
            ele.t = setInterval(() => {
                let flag = true;
                for(let attr in data){
                    let now = parseInt(getStyle(ele, attr));
                    
                    let speed = (data[attr] - now) / 20;
                    speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                    
                    ele.style[attr] = now + speed + "px";
                    
                    if(now !== data[attr]){
                        flag = false;
                    }
                }
                if(flag){
                    clearInterval(ele.t);
                    cb && cb();
                }
            }, 20);
        }
    
        // 获取非行内样式的兼容封装
        function getStyle(ele, attr){
            if(getComputedStyle){
                return getComputedStyle(ele)[attr]
            }else{
                return ele.currentStyle[attr]
            }
        }
    }
    return Details_Magnifier;
})